<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="../css/iconfont.css" />
		<script src="../js/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			div,
			ul,
			li,
			a,
			span,
			img {
				margin: 0;
				padding: 0;
				text-decoration: none;
				color: #000000;
			}
			
			li {
				list-style: none;
			}
			
			#slider {
				width: 1023px;
				height: 400px;
				/*margin: 10% auto;*/
				position: relative;
			}
			
			.slider_list li {
				position: absolute;
				display: none;
			}
			
			.slider_list li:first-child {
				display: block;
			}
			
			.slider_icon {
				position: absolute;
				z-index: 1;
				left: 40%;
				bottom: 20px;
				font-size: 0;
				padding: 4px 8px;
				border-radius: 12px;
				background-color: hsla(0, 0%, 100%, .3);
			}
			
			.slider_icon i {
				display: inline-block;
				width: 12px;
				height: 12px;
				border-radius: 50%;
				margin: 0 5px;
			}
			
			.btn {
				background: #fff;
			}
			
			.arrow {
				display: none;
				width: 30px;
				height: 60px;
				background-color: rgba(0, 0, 0, .2);
				position: absolute;
				top: 50%;
				margin-top: -30px;
			}
			
			.prve {
				left: 0;
			}
			
			.next {
				right: 250px;
			}
			
			.arrow span {
				display: block;
				width: 10px;
				height: 10px;
				border-bottom: 2px solid #fff;
				border-left: 2px solid #fff;
			}
			
			.slider_left {
				margin: 25px 0 0 10px;
				transform: rotate(45deg);
			}
			
			.slider_right {
				margin: 25px 0 0 5px;
				transform: rotate(-135deg);
			}
			
			.arrow:hover {
				background: rgba(255, 255, 255, .5);
			}
			
			#slider:hover .arrow {
				display: block;
			}
			
			.btn_act {
				background: #db192a;
			}
			
			.dex_daohang {
				width: 205px;
				height: 400px;
				background-color: rgba(49, 47, 55, .5);
				float: left;
			}
			
			#slider {
				float: left;
			}
			
			.index_lubotu {
				width: 1228px;
				height: 400px;
				margin: 0 auto !important;
				margin-bottom: 10px;
				position: relative;
			}
			
			.header_dap {
				width: 100%;
			}
			
			.hed_li_list {
				line-height: 29px;
				display: block;
			}
			
			.hed_li_list li {
				padding-left: 13px;
				overflow: hidden;
				font-family: 'microsoft yahei';
			}
			
			.hed_li_list li a {
				color: #FFFFFF;
				font-size: 14px;
				list-style: none;
				padding-left: 5px;
				text-decoration: none;
			}
			/*.hed_li_list li a:hover{
				background-color: #FFFFFF;
				color: #aaaaaa;
				display: inline-block;
			}*/
			
			.hed_li_list li i {
				color: #FFFFFF;
				font-size: 14px;
				list-style: none;
				text-decoration: none;
			}
		</style>

		<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
		<script type="text/javascript">
			$(function() {
				var count = 0;
				var $li = $("#slider>ul>li");
				$(".next").click(function() {
					count++;
					if(count == $li.length) {
						count = 0;
					}
					$li.eq(count).fadeIn().siblings().fadeOut();
					$(".slider_icon i").eq(count).addClass("btn_act").siblings().removeClass('btn_act');
					console.log(count);
				});
				$(".prve").click(function() {
					count--;
					if(count == -1) {
						count = $li.length - 1;
					}
					console.log(count);
					$li.eq(count).fadeIn().siblings().fadeOut();
					$(".slider_icon i").eq(count).addClass("btn_act").siblings().removeClass('btn_act');
				});
				$(".slider_icon i").mouseenter(function() {
					$(this).addClass('btn_act').siblings().removeClass("btn_act");
					$li.eq($(this).index()).fadeIn().siblings().fadeOut();
					count = $(this).index();
				});
			});
		</script>

	</head>

	<body>
		<div class="header_dap">
			<div class="index_lubotu" style="clear: both;">
				<div class="dex_daohang">
					<ul class="hed_li_list">
						<li>
							<i class="iconfont icon-fangdajing"></i>
							<a href="#">全球进口/食品/生鲜</a>
						</li>
						<li>
							<i class="iconfont icon-fangdajing"></i>
							<a href="#">全球进口/食品/生鲜</a>
						</li>
						<li>
							<i class="iconfont icon-fangdajing"></i>
							<a href="#">全球进口/食品/生鲜</a>
						</li>
						<li>
							<i class="iconfont icon-fangdajing"></i>
							<a href="#">全球进口/食品/生鲜</a>
						</li>
						<li>
							<i class="iconfont icon-fangdajing"></i>
							<a href="#">全球进口/食品/生鲜</a>
						</li>
						<li>
							<i class="iconfont icon-fangdajing"></i>
							<a href="#">全球进口/食品/生鲜</a>
						</li>
						<li>
							<i class="iconfont icon-fangdajing"></i>
							<a href="#">全球进口/食品/生鲜</a>
						</li>
						<li>
							<i class="iconfont icon-fangdajing"></i>
							<a href="#">全球进口/食品/生鲜</a>
						</li>
						<li>
							<i class="iconfont icon-fangdajing"></i>
							<a href="#">全球进口/食品/生鲜</a>
						</li>
						<li>
							<i class="iconfont icon-fangdajing"></i>
							<a href="#">全球进口/食品/生鲜</a>
						</li>
						<li>
							<i class="iconfont icon-fangdajing"></i>
							<a href="#">全球进口/食品/生鲜</a>
						</li>
						<li>
							<i class="iconfont icon-fangdajing"></i>
							<a href="#">全球进口/食品/生鲜</a>
						</li>
						<li>
							<i class="iconfont icon-fangdajing"></i>
							<a href="#">全球进口/食品/生鲜</a>
						</li>
					</ul>
				</div>
				<div id="slider">
					<ul class="slider_list">
						<li>
							<a href="#"><img src="../img/header_1.jpg"></a>
						</li>
						<li>
							<a href="#"><img src="../img/header_2.jpg"></a>
						</li>
						<li>
							<a href="#"><img src="../img/header_3.jpg"></a>
						</li>
						<li>
							<a href="#"><img src="../img/header_4.jpg"></a>
						</li>
						<li>
							<a href="#"><img src="../img/header_5.jpg"></a>
						</li>
						<li>
							<a href="#"><img src="../img/header_1.jpg"></a>
						</li>
						<li>
							<a href="#"><img src="../img/header_2.jpg"></a>
						</li>
						<li>
							<a href="#"><img src="../img/header_3.jpg"></a>
						</li>
					</ul>
					<div class="slider_icon">
						<i class="btn btn_act"></i>
						<i class="btn"></i>
						<i class="btn"></i>
						<i class="btn"></i>
						<i class="btn"></i>
						<i class="btn"></i>
						<i class="btn"></i>
						<i class="btn"></i>
					</div>
					<a href="javascript:;" class="arrow prve">
						<span class="slider_left"></span>
					</a>
					<a href="javascript:;" class="arrow next">
						<span class="slider_right"></span>
					</a>
				</div>
				<!--个人中心开始-->
				<style type="text/css">
					.gerenzx {
						width: 206px;
						height: 238px;
						background-color: #dcdfe5;
						z-index: 999;
						position: absolute;
						right: 33px;
						top: 82px;
					}
					
					.touxiang {
						width: 70px;
						height: 70px;
						border-radius: 50%;
						border: 5px solid rgba(202, 204, 207, .7);
						background-color: bisque;
						position: absolute;
						top: -23px;
						right: 68px;
						text-align: center;
						line-height: 70px;
					}
					
					.nihao {
						width: 206px;
						height: 178px;
						position: absolute;
						bottom: 0;
						text-align: center;
						/*background-color: palegreen;*/
					}
					
					.touxiang p {
						text-align: center;
						color: #999;
						line-height: 20px;
					}
					
					.dapo_box {
						text-align: center;
						margin-top: 29px;
						margin-bottom: 6px;
					}
					
					.gin_box {
						display: inline-block;
						width: 71px;
						height: 29px;
						line-height: 29px;
						border-radius: 8px;
						border: 1.3px solid #ff4040;
					}
					
					.gin_box a {
						text-decoration: none;
						color: #ff4040;
					}
					
					.gin_box a:hover{
						width: 71px;
						height: 29px;
						color: #FFFFFF;
						background-color: #ff4040;
						display: inline-block;
						border-radius: 8px;
					}
					.haidaox{
						line-height: 23px;
					}
					.haidaox{
						font-size: 14px;
						color: #666666;
					}
					.haidaox span{
						color: #ff4040;
					}
				</style>
				<div class="gerenzx">
					<div class="touxiang">
						lzz
					</div>
					<div class="nihao">
						<p>Hi~你好！</p>
						<div class="dapo_box">
							<div class="gin_box">
								<a href="#">登录</a>
							</div>
							<div class="gin_box">
								<a href="#">注册</a>
							</div>
						</div>
						<div class="ul_li_log">
							<ul class="haidaox">
								<li><a href="#"><span>[优选]</span>就要嗨到星期五！</a></li>
								<li><a href="#">[优选]就要嗨到星期五！</a></li>
								<li><a href="#">[优选]就要嗨到星期五！</a></li>
							</ul>
						</div>
					</div>
				</div>
				<!--个人中心结束-->
			</div>
		</div>
	</body>

</html>